<template>
	<transition name="fade-transform" mode="out-in">
		<main-content
			v-if="!editPage"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item
						:label="$t('common.choose_merchant') + ':'"
						prop="merchantId"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:placeholder="
								$t(
									'dxn.card_ables_list.table_state_placeholder'
								)
							"
							:clearable="true"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-select
							v-model="selectSearchType"
							style="width: 120px"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								:label="$t('agent.picture_title')"
								:value="1"
							></el-option>
							<el-option
								:label="$t('common.createBy')"
								:value="2"
							></el-option>
							<el-option
								:label="$t('common.last_updateBy')"
								:value="3"
							></el-option>
						</el-select>
						<el-input
							v-input="{ name: 'symbols' }"
							v-model="selectSearchVal"
							clearable
							size="medium"
							style="width: 220px"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item :label="$t('agent.picture_type') + ':'">
						<el-select
							v-model="queryData.imageType"
							size="medium"
							:placeholder="$t('common.all')"
							clearable
							style="width: 120px"
						>
							<el-option
								v-for="item in materialPictureTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('agent.picture_size') + ':'">
						<el-select
							v-model="queryData.imageSize"
							size="medium"
							:placeholder="$t('common.all')"
							clearable
							style="width: 120px"
						>
							<el-option
								v-for="item in pictureSizeTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('203031') && isShow"
							type="warning"
							icon="el-icon-folder-add"
							size="medium"
							@click="openEdit('')"
						>
							{{ $t('agent.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:max-height="tableHeight"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						prop="displayOrder"
						align="center"
						:label="$t('common.sort')"
						width="120"
					>
						<template slot-scope="scope">
							<span
								v-if="
									!!scope.row.displayOrder ||
										scope.row.displayOrder === 0
								"
							>
								{{ scope.row.displayOrder }}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="merchantId" align="center" :label="$t('common.belong_merchant')">
							<template slot-scope="scope">
								<span v-if="!!scope.row.merchantId">
									<span>{{ merchantFilter(scope.row.merchantId) }}</span>
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column> -->
					<el-table-column
						prop="imageName"
						align="center"
						:label="$t('agent.picture_title')"
						width="200"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.imageName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="imageType"
						align="center"
						:label="$t('agent.picture_type')"
						width="150"
					>
						<template slot-scope="scope">
							<span v-if="!!scope.row.imageType">
								{{
									typeFilter(
										scope.row.imageType,
										'materialPictureType'
									)
								}}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="imageSize"
						align="center"
						:label="$t('agent.picture_size')"
						width="200"
					>
						<template slot-scope="scope">
							<span v-if="!!scope.row.imageSize">
								{{
									typeFilter(
										scope.row.imageSize,
										'pictureSizeType'
									)
								}}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdBy"
						align="center"
						:label="$t('common.createBy')"
						width="150"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdBy || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('common.createAt')"
						width="200"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedBy"
						align="center"
						:label="$t('common.last_updateBy')"
						width="150"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedBy || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
						width="220"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
						min-width="240px"
						fixed="right"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('203034')"
								:disabled="loading"
								type="success"
								size="medium"
								class="noicon"
								@click="preViewPicture(scope.row)"
							>
								{{ $t('agent.preview') }}
							</el-button>
							<el-button
								v-if="hasPermission('203032')"
								type="primary"
								icon="el-icon-edit"
								:disabled="loading"
								size="medium"
								@click="openEdit(scope.row)"
							>
								{{ $t('agent.edit_info') }}
							</el-button>
							<el-button
								v-if="hasPermission('203033')"
								:disabled="loading"
								type="danger"
								size="medium"
								class="noicon"
								@click="deleteRow(scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="$store.getters.pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
			<image-viewer
				:visible.sync="imageViewerVisible"
				:url-list="[imageAddress]"
			/>
		</main-content>

		<editPage
			v-else
			:editData="editData"
			:merchantId="queryData.merchantId"
			@back="back"
		></editPage>
	</transition>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import { filterEmptyParams } from '@/utils'
import MainContent from '@/components/MainContent/index.vue'
const start = () => dayjs()
	.startOf('day')
	.valueOf()
const end = () => dayjs()
	.endOf('day')
	.valueOf()

export default {
	name: routerNames.pictureManage,
	components: {
		editPage: () => import('./components/editPage'),
		MainContent
	},
	mixins: [list],
	data() {
		this.deleteRow = this.throttle(this.deleteRow, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				createDt: [start(), end()],
				createdBy: undefined,
				imageName: undefined,
				imageType: undefined,
				imageSize: undefined,
				updatedDt: [start(), end()],
				updatedBy: undefined,
				orderType: undefined,
				merchantId: ''
			},
			isShow: false,
			selectSearchType: 1,
			selectSearchVal: '',
			dataList: [],
			total: 0,
			imageViewerVisible: false,
			imageAddress: null,
			editPage: false,
			editData: {}
		}
	},
	computed: {
		materialPictureTypeArr() {
			return this.globalDics.materialPictureType || []
		},
		pictureSizeTypeArr() {
			return this.globalDics.pictureSizeType || []
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
			// if (!this.$store.getters.isZk) {
			// 	this.queryData.merchantId = this.queryData.merchantId
			// 		? this.queryData.merchantId
			// 		: this.$store.getters.merchantInfo.id
			// 	this.loadData()
			// } else {
			// 	if (!this.queryData.merchantId) {
			// 		this.$message({
			// 			message: this.$t('common.components.select_merchant'),
			// 			type: 'error'
			// 		})
			// 	} else {
			// 		this.loadData()
			// 	}
			// }
		},
		loadData() {
			// if (!this.queryData.merchantId) return
			this.dataList = []
			this.loading = true
			this.queryData.imageName = ''
			this.queryData.createdBy = ''
			this.queryData.updatedBy = ''
			if (this.selectSearchType === 1) {
				this.queryData.imageName = this.selectSearchVal
			} else if (this.selectSearchType === 2) {
				this.queryData.createdBy = this.selectSearchVal
			} else if (this.selectSearchType === 3) {
				this.queryData.updatedBy = this.selectSearchVal
			}
			// const create = this.queryData.createDt || []
			// const updatedDt = this.queryData.updatedDt || []
			// const [startTime, endTime] = create
			// const [updateTimeStart, updateTimeEnd] = updatedDt
			let params = {
				...this.queryData
			}
			params = {
				...this.queryData,
				...this.getParams(params)
			}
			delete params.createDt
			delete params.updatedDt
			this.$api
				.agentPictureListAPI(filterEmptyParams(params))
				.then((res) => {
					if (res?.code === 200) {
						this.isShow = true
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
					this.loading = false
				})
				.catch(() => (this.loading = false))
		},
		reset() {
			this.$refs['form'].resetFields()
			this.pageNum = 1
			this.selectSearchVal = ''
			this.selectSearchType = 1
			this.queryData = {
				createDt: [start(), end()],
				createdBy: undefined,
				imageName: undefined,
				imageType: undefined,
				imageSize: undefined,
				updatedDt: [start(), end()],
				updatedBy: undefined,
				orderType: undefined,
				merchantId: ''
			}
			// if (!this.$store.getters.isZk) {
			// 	this.queryData.merchantId = this.$store.getters.merchantInfo.id
			// 	this.search()
			// } else {
			// 	this.queryData.merchantId = undefined
			// 	this.isShow = false
			// 	this.dataList = []
			// }
			this.search()
		},
		openEdit(val) {
			if (val) {
				this.editData = val
			} else {
				this.editData = {}
				this.merchantId = this.queryData.merchantId || ''
			}
			this.editPage = true
		},
		back() {
			this.editPage = false
			this.editData = {}
			this.search()
		},
		preViewPicture(val) {
			const { imageAddress } = val
			this.imageAddress = imageAddress
			this.imageViewerVisible = true
		},
		_changeTableSort({ column, prop, order }) {
			if (prop === 'createdAt') {
				prop = 1
			}
			if (prop === 'updatedAt') {
				prop = 2
			}
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		deleteRow(val) {
			const { id } = val
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$confirm(
				`<strong>${this.$t(
					'agent.is_delete_picture'
				)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'agent.rule_careful_tip'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api
						.agentPictureListDeleteAPI({ id })
						.then((res) => {
							loading.close()
							if (res?.code === 200) {
								this.$message({
									type: 'success',
									message: this.$t('common.delete_success')
								})
							} else {
								this.$message({
									type: 'error',
									message: this.$t('common.delete_fail')
								})
							}
							this.loadData()
						})
						.catch(() => {
							loading.close()
						})
				})
				.catch(() => {
					loading.close()
				})

			setTimeout(() => {
				loading.close()
			}, 1000)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-input-group__prepend {
	background-color: #fff;
}
</style>
